Summary

Issue #201

Allow partial theme object for chart Settings

You can now specify a PartialTheme to pass to the Settings component where every field in the full Theme type is recursively optional.

Before

If you wanted to change one property in a nested type lets say left margin we want to set to 0. You would need to include the default/base values of right, top and bottom margins for those to carry over, otherwise, they will be removed!

const theme: PartialTheme = {
  chartMargins: {
    left: 0,
    right: 10,
    top: 10,
    bottom: 10,
  },
};

After

You ONLY need to include the values you want, then pass that to the Settings component.

const theme: PartialTheme = {
  chartMargins: {
    left: 0,
  },
};

There is also no need to merge this PartialTheme theme using the mergeWithDefaultTheme function, although you can if you really want to 😏. This will happen automatically within the Settings. By default, it will deep-merge your PartialTheme with the LIGHT_THEME as a base. However, if you would like to set the base to be something else you can pass that as a prop.

<Chart className="story-chart-dark">
  <Settings
    theme={customPartialTheme}
    baseThemeType={BaseThemeTypes.Dark}
  />
  ...
/>

Checklist

• Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
• This was checked for cross-browser compatibility, including a check against IE11
• Proper documentation or storybook story was added for features that require explanation or tutorials
• Unit tests were updated or added to match the most common scenarios
• Each commit follows the convention